#片段图
<template>
  <div id="fragment">
    <div class="box">
      <div id="fragmentList">
        <div v-for="(item, index) in fragmentList" :key="index" :class="{choosed: fragmentNum === index}" class="fragment" @click="choosefragment(item, index)">
          <span class="type">{{ item.type }}</span>
        </div>
      </div>
      <div id="genreList" :class="{show: showStandardEcg === false}" class="genreList">
        <div v-for="(item, index) in 18" :key="index" class="genre">
          <div :id="&quot;genre&quot; + index" :class="{choosed: choosedList.includes(index)}" @click="chooseGenre(index)"></div>
          <img v-if="choosedList.includes(index)" src="./../../../assets/resource/ecg/check-square.png" alt="" class="img">
        </div>
      </div>
    </div>
    <div class="btnGroup">
      <div>
        <span class="name">通道</span>
        <span class="optionValue">{{ options[radio].label }}</span>
        <el-button size="small" style="margin-right: 10px;" @click="dialogVisible = true">选择导联</el-button>

        <span class="name">排序</span>
        <el-select v-model="fragmentValue" placeholder="请选择">
          <el-option
            v-for="item in fragmentOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
                
        <el-button size="small">打印</el-button>
      </div>
      <div class="b-right">
        <el-button size="small">保存</el-button>
        <el-button size="small">删除</el-button>
        <el-button size="small">编辑</el-button>
        <el-button size="small" @click="selectAll">全选</el-button>
        <el-button size="small">页选</el-button>
        <el-button size="small" @click="selectInvert">反选</el-button>
        <el-button size="small" @click="cleanUp">清空</el-button>
      </div>
    </div>
    <div v-if="showStandardEcg" class="top">
      <ecg-chart 
        ref = "ecgChart"
        :width-value="ecgWidthValue" 
        :height-value="ecgHeightValue"
      ></ecg-chart>
    </div>
    <div v-if="showStandardEcg" class="btnGroup">
      <div class="b-left">
        <div>
          <img src="./../../../assets/resource/ecg/step-backward.png" alt="" title="最前" class="littleBtn">
          <img src="./../../../assets/resource/ecg/caret-left.png" alt="" title="前一页" class="littleBtn">
          <img src="./../../../assets/resource/ecg/caret-left.png" alt="" title="前一秒" class="littleBtn">
          <img src="./../../../assets/resource/ecg/caret-right.png" alt="" title="后一秒" class="littleBtn">
          <img src="./../../../assets/resource/ecg/caret-right.png" alt="" title="后一页" class="littleBtn">
          <img src="./../../../assets/resource/ecg/step-forward.png" alt="" title="最后" class="littleBtn">
        </div>
        <el-button size="small">转到</el-button>
        <el-button size="small">基线上移</el-button>
        <el-button size="small">基线下移</el-button>
      </div>
      <div class="b-right">
        <el-button size="small" @click="hideStandardEcg">隐藏</el-button>
      </div>
    </div>
    <div v-if="!showStandardEcg">
      <el-button size="small" class="fullBtn" @click="toShowStandardEcg">点击此处显示标准心电图</el-button>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      title="选择导联"
      width="560px">

      <div class="five copy">
        <el-radio-group v-model="radio" class="leadList">
          <el-radio v-for="(item, index) in options" :label="item.value" :key="index" class="item">{{ item.label }}</el-radio>
        </el-radio-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Papa from 'papaparse'
import * as samplesData from './../../../../public/js/ss'
var Highcharts = require('highcharts')
import EcgChart from '@/components/ecgChart'

export default {
  components: {
    EcgChart
  },
  data() {
    return {
      ecgWidthValue: undefined,
      ecgHeightValue: undefined,
      fragmentList: [{
        value: 0,
        type: '所有片段图'
      }, {
        value: 1,
        type: '3号标准图'
      }, {
        value: 2,
        type: '单导标准图'
      }, {
        value: 3,
        type: '3号缩略图'
      }, {
        value: 4,
        type: '单导缩略图'
      }, {
        value: 5,
        type: '12号标准图'
      }, {
        value: 6,
        type: '首页典型图'
      }],
      fragmentNum: 0,
      fragmentOptions: [{
        label: '发生时刻',
        value: 0
      }, {
        label: '片段图长度',
        value: 1
      }, {
        label: '自定义',
        value: 2
      }],
      fragmentValue: '发生时刻',
      choosedList: [],
      showStandardEcg: true,
      options: [{
        label: 'I',
        value: 0
      }, {
        label: 'II',
        value: 1
      }, {
        label: 'III',
        value: 2
      }, {
        label: 'aVR',
        value: 3
      }, {
        label: 'aVL',
        value: 4
      }, {
        label: 'aVF',
        value: 5
      }, {
        label: 'V1',
        value: 6
      }, {
        label: 'V2',
        value: 7
      }, {
        label: 'V3',
        value: 8
      }, {
        label: 'V4',
        value: 9
      }, {
        label: 'V5',
        value: 10
      }, {
        label: 'V6',
        value: 11
      }],
      value: '',
      checkAll: false,
      isIndeterminate: true,

      checked: true,
      dialogVisible: false,
      checkList: ['I'],
      radio: '0',

      list: [],
      list1: [],
      list2: [],
      list2Value: 4,
      scaleValue: 16,
      fecg_data: [],
      genre: []
    }
  },
  created() {
    this.getData()
    this.$nextTick(() => {
      this.ecgWidthValue = window.innerWidth - 10
      for (let i = 0; i < 18; i++) {
        this.createGenreChart(i)
      }
    })
  },
  methods: {
    chooseGenre(index) {
      const result = this.choosedList.indexOf(index)
      if (result === -1) {
        this.choosedList.push(index)
      } else {
        this.choosedList.splice(result, 1)
      }
      console.log(this.choosedList)
    },
    choosefragment(item, index) {
      this.fragmentNum = index
    },
    selectAll() {
      const result = []
      for (let i = 0; i < 18; i++) {
        result.push(i)
      }
      this.choosedList = result
    },
    selectInvert() {
      const result = []
      for (let i = 0; i < 18; i++) {
        result.push(i)
      }
      this.choosedList.forEach(item => {
        result.forEach((ele, index) => {
          if (ele === item) {
            result.splice(index, 1)
          }
        })
      })
      this.choosedList = result
    },
    cleanUp() {
      this.choosedList = []
    },
    toShowStandardEcg() {
      this.showStandardEcg = true
      const chartWidth = document.querySelector('#genreList').offsetWidth * 0.5 - 2
      const chartHeight = (window.innerHeight - 240) * 0.55 * 0.166
      for (let i = 0; i < 18; i++) {
        this.genre[i].setSize(chartWidth, chartHeight)
      }
      this.$nextTick(() => {
        this.$refs.ecgChart.chartBox()
      })
    },
    hideStandardEcg() {
      this.showStandardEcg = false
      const chartWidth = document.querySelector('#genreList').offsetWidth * 0.5 - 2
      const chartHeight = (window.innerHeight - 240) / 6
      for (let i = 0; i < 18; i++) {
        this.genre[i].setSize(chartWidth, chartHeight)
      }
    },
    handleClick(tab, fragment) {
      console.log(tab, fragment)
    },
    getData() {
      // debugger
      const data = Papa.parse(samplesData.samplesData).data
      var fecg_data = []
      for (let i = 2; i < data.length - 1; i++) {
        var item = data[i]
        var arr = []
        arr[0] = item[0].substring(0)
        arr[1] = item[1].substring(0)
        fecg_data[i] = arr
      }

      for (let k = 4; k < fecg_data.length - 1; k++) {
        var time = fecg_data[k]
        var time1 = time[0].trim().substring(3)
        var new_time = time1.split('.')
        fecg_data[k][0] = parseInt(new_time[0]) * 1000 + parseInt(new_time[1])
        fecg_data[k][1] = Number(fecg_data[k][1])
      }
      // console.log(fecg_data)
      this.fecg_data = fecg_data
      this.list = fecg_data.slice(4, fecg_data.length - 2)
      this.list1 = fecg_data.slice(4, 600)
      this.list2 = fecg_data.slice(4, 20)
      this.list2Value = 4
    },
    createGenreChart(index) {
      const that = this
      const widthValue1 = document.querySelector('#genreList').offsetWidth * 0.5 - 2
      let heightValue
      if (this.showStandardEcg) {
        heightValue = window.innerHeight * 0.09
      } else {
        heightValue = (window.innerHeight - 240) / 6
      }
      require('highcharts/modules/data')(Highcharts)
      this.genre[index] = Highcharts.chart(`genre${index}`, {
        chart: {
          type: 'spline',
          width: widthValue1,
          height: heightValue,
          backgroundColor: '#E7F2FF'
        },
        credits: {
          enabled: false
        },
        title: {
          text: `10:12:06(1) 平均心率: 126   心搏数: 9`,
          align: 'left',
          floating: true,
          y: heightValue - 20,
          style: {
            fontSize: '14px',
            marginTop: '30px'
          }
        },
        subtitle: {
          enabled: false
        },
        yAxis: {
          labels: {
            enabled: false
          },
          tickPositions: [-1, -0.5, 0, 0.5, 1],
          title: {
            enabled: false
          },
          gridLineWidth: 0,
          max: 1
        },
        xAxis: {
          labels: {
            enabled: false
          },
          tickWidth: 0, 
          lineWidth: 0,
          gridLineWidth: 0
        },
        legend: {
          enabled: false
        },
        series: [{
          name: 'I',
          turboThreshold: 200000,
          enableMouseTracking: false,
          marker: {
            enabled: false
          },
          data: (function() {
            const value = that.list1
            var data = []

            for (let i = 0; i < value.length - 1; i += 1) {
              data.push({
                x: value[i][0],
                y: value[i][1]
              })
            }
            return data
          }()),
          zoneAxis: 'x',
          zones: [{
            value: 100,
            color: '#7cb5ec'
          }, {
            value: 300,
            color: '#ff0000'
            // dashStyle: 'dot'
          }]
        }]
      })
    },
    handleClose() {
      this.dialogVisible = false
    }
  }
}

</script>

<style lang="scss" scoped>
    #fragment {
        width: 100%;
        .copy {
            border: 1px solid #c0c4cc;
            padding: 10px;
            border-radius: 6px;
            margin-bottom: 10px;
        }
        .box {
            display: flex;
            width: 100%;
            #fragmentList {
                width: 10%;
                padding: 20px 10px;
                line-height: 28px;
                overflow-y: scroll;
                height: calc(55vh - 45px);
                .fragment{
                    display: flex;
                }
                .choosed {
                    background: #E7F2FF;
                }
            }
            .genreList {
                width: 90%;
                display: flex;
                align-content: baseline;
                flex-wrap: wrap;
                height: 55vh;
                overflow-y: scroll;
                .genre {
                    flex: 0 0 calc(50% - 2px);
                    width: calc(50% - 2px);
                    height: 9vh;
                    border: 1px solid #979797;
                    position: relative;
                }
                .choosed {
                    border: 2px solid #2a00fa;
                }
                .img {
                    position: absolute;
                    z-index: 10;
                    right: 0;
                    top: 0;
                    width: 24px;
                    height: 24px;
                }
            }
            .show {
              height: 75vh;
            }
        }
        .btnGroup {
            display: flex;
            justify-content: space-between;
            padding: 10px;
            border: 1px solid #979797;
            .optionValue {
                width: 60px;
                padding: 9px 15px;
                font-size: 12px;
                border-radius: 3px;
                display: inline-block;
                line-height: 1;
                white-space: nowrap;
                border: 1px solid #DCDFE6;
                color: #606266;
                -webkit-appearance: none;
                text-align: center;
                margin-right: 10px;
            }
            .b-left {
                display: flex;
                align-items: end;
            }
            .el-select {
                width: 120px;
                margin-right: 20px;
            }
            .name {
                margin-right: 10px;
            }
        }
        .fullBtn {
            width: 100%;
            padding: 10px;
            margin-top: 10px;
        }
        .littleBtn {
            width: 30px;
            height: 30px;
            border: 1px solid #979797;
            margin-right: 10px;
        }
        .el-dialog {
            .leadList {
                display: flex;
                flex-wrap: wrap;
                .item {
                    width: 53px;
                    margin-top: 10px;
                    
                }
            }
            .five {
                .five-list-box {
                    display: flex;
                    flex-wrap: wrap;
                    .five-list {
                        margin-right: 10px;
                        .name {
                            font-size: 14px;
                            color: #4A4A4A;
                            text-align: left;
                            width: 120px;
                            display: inline-block;
                        }
                        .el-input {
                            width: 100px;
                        }
                    }
                }
            }
            .list {
                margin-top: 10px;
                .name {
                    font-size: 14px;
                    color: #4A4A4A;
                    text-align: left;
                    width: 100px;
                    display: inline-block;
                }
                .el-select {
                    width: 115px;
                }
            }
        }
    }
</style>



